<template>
	<div class="content">
		<div class="content_title">
			<p>消息通知</p>
		</div>
		<div class="content_bottom">
			<li class="content_bottom_item" v-for="(item,index) in dataList.list" @click="gogetail(item.messageType,item.businessUuid)">
				<div class="content_bottom_item_title" v-if="item.messageType == 'QJ'" >
					<img src="../../assets/user/msg1.png" alt="">
					<p>请假通知</p>
				</div>
				<div class="content_bottom_item_title" v-if="item.messageType == 'BM'">
					<img src="../../assets/user/msg2.png" alt="">
					<p>培训通知</p>
				</div>
				<div class="content_bottom_item_title" v-if="item.messageType == 'WD'">
					<img src="../../assets/user/msg3.png" alt="">
					<p>问答通知</p>
				</div>
				<div class="content_bottom_item_title" v-if="item.messageType == 'WJ'">
					<img src="../../assets/user/msg4.png" alt="">
					<p>问卷通知</p>
				</div>
				<div class="content_bottom_item_msg">
					<span>{{item.message}}</span>
					<div>
						<span>查看更多</span>
						<el-icon>
							<ArrowRight />
						</el-icon>
					</div>
				</div>
			</li>
			<!-- <li class="content_bottom_item">
				<div class="content_bottom_item_title">
					<img src="../../assets/user/msg2.png" alt="">
					<p>培训通知</p>
				</div>
				<div class="content_bottom_item_msg">
					<span>您好，您在2023.06.02上午-2023.06.03下午的请假已通过。</span>
					<div>
						<span>查看更多</span>
						<el-icon><ArrowRight /></el-icon>
					</div>
				</div>
			</li>
			<li class="content_bottom_item">
				<div class="content_bottom_item_title">
					<img src="../../assets/user/msg3.png" alt="">
					<p>问答通知</p>
				</div>
				<div class="content_bottom_item_msg">
					<span>您好，您在2023.06.02上午-2023.06.03下午的请假已通过。</span>
					<div>
						<span>查看更多</span>
						<el-icon><ArrowRight /></el-icon>
					</div>
				</div>
			</li>
			<li class="content_bottom_item">
				<div class="content_bottom_item_title">
					<img src="../../assets/user/msg4.png" alt="">
					<p>问卷通知</p>
				</div>
				<div class="content_bottom_item_msg">
					<span>您好，您在2023.06.02上午-2023.06.03下午的请假已通过。</span>
					<div>
						<span>查看更多</span>
						<el-icon><ArrowRight /></el-icon>
					</div>
				</div>
			</li> -->
		</div>
	</div>
</template>

<script setup>
	import {
		messageList
	} from "../../api/home.js";
	import {
		ArrowRight
	} from '@element-plus/icons-vue'
	import {
		onBeforeMount,
		reactive
	} from 'vue'
	import {
		useRouter
	} from 'vue-router'
	const router = useRouter()
	const dataList = reactive({
		list: ''
	})
	onBeforeMount(() => {
		getList()
	})
	const getList = () => {
		var data = {
			page: {
				pageNum: 1
			},
			params: {}
		}
		messageList(data).then(res => {
			dataList.list = res.data.list
		})
	}
	
	const gogetail = (name,id) => {
		console.log(name)
		
		if(name == 'QJ'){
			router.push('/leaveList')
		}else if(name == 'WD'){
			router.push('/essay')
		}else if(name == 'BM'){
			router.push({
				path:'/apply',
				query:{type:2,id:id}
			})
		}else if(name == 'WJ'){
			router.push('/taskCenter')
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 910px;
		margin-left: 30px;

		&_title {
			width: 100%;
			border-bottom: 1px solid #D9D9D9;

			p {
				width: fit-content;
				font-size: 18px;
				font-weight: 600;
				color: #11918E;
				padding-bottom: 9px;
				border-bottom: 2px solid #11918E;
			}

		}

		&_bottom {
			margin-top: 30px;
			display: flex;
			flex-direction: column;

			&_item {
				display: flex;
				flex-direction: column;
				width: 900px;
				height: 93px;
				background: #FFFFFF;
				border-radius: 10px;
				border: 1px solid rgba(17, 145, 142, 0.2);
				margin-bottom: 30px;
				padding: 15px;

				&_title {
					display: flex;
					align-items: center;
					margin-bottom: 10px;

					img {
						width: 27px;
						height: 27px;
						margin-right: 5px;
					}
				}

				&_msg {
					display: flex;
					align-items: center;
					justify-content: space-between;

					div {
						display: flex;
						align-items: center;

						span {
							margin-right: 5px;
						}
					}
				}
			}
		}
	}
</style>